<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{main.title}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height(); /* -32 顶部主菜单高度，   -90 查询条件高度*/
            $("body").css("height",_gridHeight + "px");
        }
        $(function () {
            resizePageSize();
            $("#user-nav-tools").click(function (event) {
                event.stopPropagation();
                $("#user-nav-info > li").removeClass("user-nav");

            });
            $("body").click(function (event) {
                event.stopPropagation();
                $("#user-nav-info > li").addClass("user-nav");

            });
            $(".gd-sys-menu >li").click(function (event) {
                event.stopPropagation();
                $(".gd-sys-menu > li").removeClass("active");
                $(this).addClass("active");
                var menuId = $(this).attr("menuId");
                console.info("menuId"+menuId);
                clickSysMenu(menuId)
            });
            $(".gd-sys-menu >li:first").click();

        });

        function clickSysMenu(menuId) {
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/getServiceMenu}]]*/'',
                data: [{name:"menuId",value:menuId}],
                success: function (data) {
                    console.info(data);
                    var htmlContents ='';
                    $(data).each(function (index,item) {
                        htmlContents +='<li><a href="#" ><i class="'+item.menuIcon+'"></i><span>'+item.menuName+'</span></a>';
                        htmlContents +='<ul class="sm-page-menu nav navbar-btn">';
                        //console.info(item.childrenList);
                        $(item.list).each(function (index1,item1) {
                            htmlContents +='<li><a href="' + /*[[${#request.getContextPath()}]]*/'';
                            htmlContents += '/' + item1.menuUrl +'#" target="iframe"><i class="' +item1.menuIcon +'"></i><span>'+item1.menuName+'</span></a></li>';
                        });
                        htmlContents +="</ul>";
                        htmlContents += '</li>';
                    });
                    $("#gd-server-menu-id").html(htmlContents);

                },
                error: function(msg){
                    message(/*[[#{/getServiceMenu}]]*/'');
                }
            });

        }


    </script>
    <style>
        .user-nav{
            display: none !important;

        }
        .nav-tabs{
            border-bottom: 1px solid #ddd;
        }
        .nav-tabs > li > .active,
        .nav-tabs > li > a:FOCUS {
            border-color: #ddd #ddd #fff;
        }
        .sm-service-menu{
            margin-left: 10px;
        }
        .sm-service-menu > li{
            list-style: none;
        }



    </style>
</head>
<body style="width: 100%;height:100%;display: flex;flex-direction: column">
<div style="flex-basis: 94px;display: flex;flex-direction: row">
    <div style="flex-grow: 1">
        <!--/*@thymesVar id="siteLanguage" type="String"*/-->
        <img th:if="${siteLanguage} eq 'en'" th:src="@{/assets/images/logo_en.png}"/>
        <img th:if="${siteLanguage} ne 'en'" th:src="@{/assets/images/logo_zh.png}"/>
    </div >
    <div style="flex-basis: 150px;margin-top: 20px">
        <a id="user-nav-tools" href="#">
            <i class="glyphicon glyphicon-user"></i>
            <span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"></span>
        </a>
        <ul id="user-nav-info" class="nav">
            <li class="user-nav">
                <a href="#">
                    <i class="glyphicon glyphicon-heart"></i>
                    <span>用户信息</span>
                </a>
            </li>
            <li class="user-nav">
                <a th:href="@{/logout}">
                    <i class="glyphicon glyphicon-cutlery"></i>
                    <span>注销</span>
                </a>
            </li>
        </ul>
    </div>
</div>
<div style="flex-basis: 50px">
    <ul class="gd-sys-menu nav nav-tabs">
        <!--/*@thymesVar id="menuList" type=""*/-->
        <li th:each="item :${session.menuList}" th:menuId="${item.menuId}">
            <a href="#" >
                <i  th:class="${item.menuIcon}" ></i>
                <span th:text="${item.menuName}"></span>
            </a>
        </li>
    </ul>


</div>
<div style="display: flex;flex-grow: 1">
    <ul id="gd-server-menu-id" class="sm-service-menu">

    </ul>
    <iframe id="mainFrame" name="iframe" style="flex-grow:1;padding-left:20px;padding-top: 5px;" frameborder="no" border="0" marginwidth="0" marginheight="0" th:src="@{/welcome}">

    </iframe>
</div>


</div>
</div>
<!--<span th:text="#{main.title}"></span>-->
<!--<a th:href="@{/logout}" th:text="#{main.logout}"></a>-->
</body>
</html>